<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
        <style type="text/css">
        body{

            background-color: #EEEEEE;
        }

        #carousel-example-generic img{
            margin: 0 auto;
        }

        #carousel-example-generic{
            margin-top: 0px;
        }

    </style>
</head>
<body>
<!--导航条，在顶部固定:nav:html5新出的一个标记，具有比较强的语义性-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!--导航条的头部-->
    <div class="navbar-header">
        <a th:href="@{/front/index}" class="navbar-brand" >
            图片分享
        </a>
        <!-- 缩小之后的按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right" >

            <li th:if="${session.loginuser==null}"><a  id="login"><span class="glyphicon glyphicon-fire"></span><span id="login_info">登录</span></a></li>
            <li th:if="${session.loginuser!=null}"><a><span th:text="|${session.loginuser==null?'':session.loginuser.user_name}已经登录|"></span></a></li>
          <li th:if="${session.loginuser!=null}" th:each="user:${userList}"><a><img th:src="|@{/}${session.loginuser==null?'':user.session.loginuser.user_head}|" style="width: 100%;height: 100%"></a>
            <li th:if="${session.loginuser==null}"><a th:href="@{/front/registerUI}"><span class="glyphicon glyphicon-fire"></span>注册</a></li>
            <li th:if="${session.loginuser!=null}"><a th:href="@{/front/userCenterUI}"><span class="glyphicon glyphicon-list"></span>个人中心</a></li>


        </ul>
    </div>

</nav>



<!--bs中的js插件-----轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height: 400px">
    <div  style="padding-top:250px" class="row">
        <!--bs组件----》输入框组-->
        <form method="post" th:action="@{/front/index1}" id="seachForm2" name="searhForm2">

            <div class="col-lg-3">
                <table  style="margin: 0px auto">
                                        <tr>
                                           <td>
                                 <input class="form-control" name="image_name" value="搜索您喜欢的.." style="background-color: rgba(0,0,0,0.6);margin-left: 480px;color: whitesmoke">
                       </td>
<!--                        <td>-->
<!--                <select class="form-control" name="type_id" style="width:150px;background-color: rgba(0,0,0,0.6);margin-left: 400px;color: whitesmoke">-->
<!--                    <option value="0">请选择类型</option>-->
<!--                    <option th:each="type:${types}" th:text="${type.type_name}" th:value="${type.type_id}" th:selected="${type.type_id==qb.type_id}"></option>-->
<!--                </select>-->
<!--                        </td>-->
                        <td>

                          <button class="glyphicon glyphicon-search btn-primary" type="submit" style="margin-left: 480px;width:33px;height:33px;background-color: rgba(0,0,0,0.8);color: whitesmoke"></button>

                       </td>
                    </tr>
                </table>

            </div>
<!--            <input type="hidden" name="currentPage" value="1"/>-->

<!--            &lt;!&ndash;    <div class="col-lg-3 pull-right">&ndash;&gt;-->

<!--            &lt;!&ndash;        <select class="form-control">&ndash;&gt;-->
<!--            &lt;!&ndash;            <option>默认排序</option>&ndash;&gt;-->
<!--            &lt;!&ndash;            <option>最新发布</option>&ndash;&gt;-->
<!--            &lt;!&ndash;            <option>播放次数最多</option>&ndash;&gt;-->
<!--            &lt;!&ndash;        </select>&ndash;&gt;-->
<!--            &lt;!&ndash;    </div>&ndash;&gt;-->
        </form>
    </div>
</div>

<div>
    <div  style="background-color: lightskyblue;margin-top: 10px;padding: 10px;" class="row">
        <!--bs组件----》输入框组-->
       <h3 style="padding-left: 30px">热门图片</h3>
    </div>
    <div class="container-fluid" style="margin-top: 10px;">

    <div  class="col-md-12">
        <!-- 栅格系统布局，一个商品 -->
        <div class="row"  id="image" >
            <!--一个视频start-->
            <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3" th:each="image1:${hot}">
                <!--bs中组件-----》缩略图-->
                <div class="thumbnail">

                    <img th:src="|@{/}${image1.image_url}|" alt="..." style="width: 255px;height: 200px">
                    <div class="caption">
                        <h4 th:text="${image1.image_name}" style="padding-left: 146px"></h4>
                        <p style="padding-left: 146px">
                            <a class="btn btn-danger btn-sm" th:href="@{/front/imagedetailui(image_id=${image1.image_id})}" id="my_image1">查看</a>
                        </p>
                    </div>
                </div>
            </div>
            <!--一个视频end-->
        </div>


    </div>


</div>
</div>



<div>
    <h1>&nbsp;</h1>
    <div  style="background-color: lightskyblue;margin-top: 10px;padding: 10px;" class="row">
        <!--bs组件----》输入框组-->
        <h3 style="padding-left: 30px">全部图片</h3>
        <form method="post" th:action="@{/front/index}" id="seachForm" name="searhForm">
            <div class="col-lg-3 pull-right">
                <div class="input-group" style="width: 80%;margin: 0px auto;">
                    <button type="submit" class="btn btn-success">查询</button>
                </div>
            </div>
            <div class="col-lg-3 pull-right">
                <select class="form-control" name="type_id">
                    <option value="0">请选择类型</option>
                    <option th:each="type:${types}" th:text="${type.type_name}" th:value="${type.type_id}" th:selected="${type.type_id==qb.type_id}"></option>
                </select>

            </div>
            <input type="hidden" name="currentPage" value="1"/>

<!--            <div class="col-lg-3 pull-right">-->

<!--                <select class="form-control">-->
<!--                    <option value="0">默认排序</option>-->
<!--                    <option >最新发布</option>-->
<!--&lt;!&ndash;                    <option th:each="image:${hot}" th:text="${type.type_name}" th:value="${type.type_id}" th:selected="${type.type_id==qb.type_id}">播放次数最多</option>&ndash;&gt;-->
<!--                </select>-->
<!--            </div>-->
        </form>
    </div>
<div class="container-fluid" style="margin-top: 10px;">

        <div  class="col-md-12">
            <!-- 栅格系统布局，一个商品 -->
            <div class="row"  id="images" >
                <!--一个视频start-->
                <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3" th:each="image:${pb.list}">
                    <!--bs中组件-----》缩略图-->
                    <div class="thumbnail">
                        <img th:src="|@{/}${image.image_url}|" alt="..." style="width: 255px;height: 200px">
                        <div class="caption">
                            <h4 th:text="${image.image_name}" style="padding-left: 146px"></h4>
                            <p style="padding-left: 146px">
                                <a class="btn btn-danger btn-sm" th:href="@{/front/imagedetailui(image_id=${image.image_id})}" id="my_image">查看</a>
                            </p>
                        </div>
                    </div>
                </div>
                <!--一个视频end-->
            </div>

            <ul class="pagination pull-right">
                <li><a th:href="|javascript:goPage(${pb.pageNum-1})|">&laquo;</a></li>
                <!--1 2 3 4 5 应该循环查询pages:总页码
                 url传值： /mananer/listui?currentPage=1
                -->

                <li  th:class="${pb.pageNum==i?'active':''}" th:each="i:${#numbers.sequence(1,pb.pages)}"><a th:href="|javascript:goPage(${i})|" th:text="${i}"></a></li>

                <li><a th:href="|javascript:goPage(${pb.pageNum+1})|">&raquo;</a></li>
            </ul>
        </div>


    </div>
</div>
</div>
<!--登录的模态框   bs中js插件----》模态框-->
<div class="modal fade" id="myModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="@{/front/login}" method="post" id="login_form" name="login_form">
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">用户名：</label>
                        <div class="col-md-6 ">
                            <input type="text" class="form-control"  required="required" name="user_name" />

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">密码：</label>
                        <div class="col-md-6 ">
                            <input type="password" class="form-control"  required="required" name="user_pwd">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="margin-right: 200px">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="login_btn">登录</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" th:src="@{http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js}" type="text/javascript"></script>

<!--<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>-->
<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>
<script type="text/javascript">

    //打开登录模态框
    $("#login").click(function(){
        if($("#login_info").text()=='登录'){
            //展示模态框的意思
            $('#myModal').modal();
        }

        return false;//组织超连接的默认行为
    });


    //处理登录
    $("#login_btn").click(function(){

        $("#login_form")[0].submit();
    });

    //@{/manager/listui(currentPage=${i})}
    //index:表示的是页码
    function goPage(index){

        //将当前页的信息保存到隐藏域中
        searhForm.currentPage.value=index;
        //可以以js的方式进行表单提交
        searhForm.submit();
    }

    $('#carousel-example-generic').backstretch([
        'https://webimg.quanjing.com/Banner/1630574205425.jpg',
        'https://webimg.quanjing.com/Banner/1630574088892.jpg'

    ], {
        fade: 1000, // 动画时长
        duration: 8000 // 切换延时
    });

</script>
<script>

</script>

</body>
</html>